<template>
    <el-container class="app-container">
      <!-- 侧边栏 -->
      <el-aside :width="sidebarOpen ? '240px' : '64px'">
        <Sidebar />
      </el-aside>
  
      <el-container>
        <!-- 顶部导航 -->
        <el-header class="app-header">
          <div class="header-left">
            <el-button @click="toggleSidebar" :icon="sidebarOpen ? Fold : Expand" circle />
            <el-breadcrumb separator="/">
              <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
              <el-breadcrumb-item>{{ currentRouteName }}</el-breadcrumb-item>
            </el-breadcrumb>
          </div>
          
          <div class="header-right">
            <el-tooltip content="消息中心" placement="bottom">
              <el-badge :value="12" class="header-icon">
                <el-icon :size="20"><Bell /></el-icon>
              </el-badge>
            </el-tooltip>
            
            <el-dropdown>
              <span class="user-info">
                <el-avatar :size="36" :src="user.avatar" />
                <span class="user-name">{{ user.name }}</span>
              </span>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item>个人中心</el-dropdown-item>
                  <el-dropdown-item>账户设置</el-dropdown-item>
                  <el-dropdown-item divided>退出登录</el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </div>
        </el-header>
  
        <!-- 主内容区 -->
        <el-main class="app-main">
          <router-view />
        </el-main>
  
        <!-- 页脚 -->
        <el-footer class="app-footer">
          <div class="footer-content">
            © 2025 PaySaaS 支付系统 | XXXXXX提供技术支持
          </div>
        </el-footer>
      </el-container>
    </el-container>
  </template>
  
  <script lang="ts" setup>
  import { computed } from 'vue'
  import { useRoute } from 'vue-router'
  import { useAppStore } from './store/index'
  import Sidebar from './components/Sidebar.vue'
  import {
    Fold,
    Expand,
    Bell
  } from '@element-plus/icons-vue'
  
  const route = useRoute()
  const store = useAppStore()
  
  const user = computed(() => store.user)
  const sidebarOpen = computed(() => store.sidebarOpen)
  
  const currentRouteName = computed(() => {
    return route.meta.title || '控制台'
  })
  
  const toggleSidebar = () => {
    store.toggleSidebar()
  }
  </script>
  
  <style lang="scss" scoped>
  .app-container {
    height: 100vh;
    
    .el-aside {
      background-color: #001529;
      transition: width 0.3s;
    }
  }
  
  .app-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 20px;
    height: 60px;
    background-color: #fff;
    box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
    
    .header-left {
      display: flex;
      align-items: center;
      
      .el-button {
        margin-right: 20px;
      }
    }
    
    .header-right {
      display: flex;
      align-items: center;
      
      .header-icon {
        margin-right: 24px;
        cursor: pointer;
      }
      
      .user-info {
        display: flex;
        align-items: center;
        cursor: pointer;
        
        .user-name {
          margin-left: 10px;
          font-size: 14px;
        }
      }
    }
  }
  
  .app-main {
    padding: 20px;
    background-color: #f5f7fa;
    overflow-y: auto;
  }
  
  .app-footer {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 50px;
    background-color: #fff;
    border-top: 1px solid #e6e6e6;
    
    .footer-content {
      font-size: 12px;
      color: #999;
    }
  }
  </style>